<template>
    <view>
        <view v-if="status">

            <view v-if="status.isLoading" class="flex flex-row flex-row-center-center px-50 py-24">
                <tm-icon spin name="tmicon-shuaxin"></tm-icon>
            </view>

            <view v-if="!status.isLoading && (status.isError || _len == 0)" class="py-50 empty">
                <image :src="imgHost('empty.png')"></image>
                <view class="title">{{ props.title }}</view>
                <view v-if="props.showBtn" @click="emits('restartLoad')" class="btn flex flex-center round-6"
                    :style="{ backgroundColor: props.btnColor }">点击刷新</view>
            </view>


            <view v-if="!status.isMore && !status.isLoading && !status.isError && _len > 0"
                class="my-50 text-align-center text-size-s c_shui">
                没有更多的数据了</view>
            <view @click="emits('restartLoad')" v-if="!status.isLoading && status.isError && _len > 0"
                class="my-50 text-align-center text-size-s c_shui">
                加载失败,点我重试</view>

        </view>
        <view v-if="_error" class="py-50 empty">
            <image :src="imgHost('empty.png')"></image>
            <view class="title">{{ props.title }}</view>
            <view v-if="props.showBtn" @click="emits('restartLoad')" class="btn flex flex-center round-6"
                :style="{ backgroundColor: props.btnColor }">点击刷新</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { imgHost } from '@/libs/imgHost';
import { PropType, computed } from 'vue';
const emits = defineEmits(["restartLoad"])
const props = defineProps({
    status: {
        type: Object as PropType<Gc.listPageLayoutType | null>,
        default: () => null
    },
    listLen: {
        type: Number,
        default: 0
    },
    btnColor: {
        type: String,
        default: "white"
    },
    error: {
        type: Boolean,
        default: false
    },
    title:{
        type:String,
        default:"没有数据"
    },
    showBtn:{
        type: Boolean,
        default: true
    }
})
const _len = computed(() => props.listLen)
const _error = computed(() => props.error)
</script>
<style lang="less" scoped>
.empty {
    display: flex;
    flex-flow: column;
    align-items: center;
    align-content: center;

    image {
        width: 485rpx;
        height: 395rpx;
    }

    .title {
        font-size: 32rpx;
        color: #484848;
        margin-top: 32rpx;
        margin-bottom: 32rpx;
        font-weight: bold;

    }

    .btn {
        width: 485rpx;
        height: 88rpx;
        font-size: 30rpx;
        color: #FF4E4E;
        background-color: white;

    }
}</style>